<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
  <div class="ma-content-block lg:flex justify-between p-4">

    <div class="w-full lg:ml-4 mt-5 lg:mt-0">
      <!-- CRUD 组件 -->
      <ma-crud :options="crud" :columns="columns" ref="crudRef">
        <template #cookies="{record}">
          <div v-if="!checkCookieField(record.cookies_obj)">
            <a-tag color="#ff5722">无效</a-tag>
          </div>
          <div v-else-if="checkCookieIsSoonVoid(record.cookies_obj)">
            <a-tag color="#ffb400">即将过期</a-tag>
          </div>
          <div v-else-if="checkCookieIsExpire(record.cookies_obj)">
            <a-tag color="#f53f3f">已过期</a-tag>
          </div>
          <div v-else>
            <a-tag title="有效期">{{ getFormatSessionExpire(record.cookies_obj) }}</a-tag>
          </div>
        </template>
        <template #registered_at="{record}">
          <a-tag>{{ formatDate(record.registered_at) }}</a-tag>
        </template>

        <template #operationAfterExtend="{ record }">

          <div>
            <a-link @click="doLogin(record)">登录
              <template #icon>
                <icon-sync/>
              </template>
            </a-link>
          </div>
          <div v-if="!checkCookieIsExpire(record.cookies_obj)">
            <a-link @click="openFinanceModal(record)">
              <template #icon>
                <icon-wechatpay/>
              </template>
              资金管理
            </a-link>
          </div>

        </template>
      </ma-crud>
    </div>

    <finance ref="financeRef"/>
  </div>
</template>

<script setup>
import {ref, onMounted, reactive, computed} from 'vue'
import Api from '@/api/user'
import GameApi from '@/api/game'
import AnchorApi from '@/api/anchor'
import WxApi from '@/api/wx'
import {
  checkCookieIsExpire
  , checkCookieField,
  checkCookieIsSoonVoid,
  getFormatSessionExpire,
  formatDate
} from '@/utils/fun'


import Finance from './components/finance.vue'
import api from "@/api/anchor";
import {Message} from "@arco-design/web-vue";
import UserApi from "@/api/user";

const crudRef = ref()

const crud = reactive({
  api: Api.getPageList,
  recycleApi: Api.getRecyclePageList,
  searchColNumber: 3,
  showIndex: false,
  pageLayout: 'fixed',
  rowSelection: {showCheckedAll: true},
  operationColumn: true,
  operationColumnWidth: 250,
  operationColumnAlign: 'left',
  add: {show: true, api: Api.create},
  edit: {show: true, api: Api.save},
  delete: {
    show: true,
    api: Api.delete,
    realApi: Api.realDelete,
  },
  recovery: {show: true, api: Api.recovery},

  isDbClickEdit: false,
  formOption: {
    width: 800,
    layout: [
      {
        formType: 'grid', cols: [{span: 12, formList: [{dataIndex: 'username'}]},
          {span: 12, formList: [{dataIndex: 'password'}]}]
      },
      {
        formType: 'grid', cols: [{span: 12, formList: [{dataIndex: 'game_id'}]},
          {span: 12, formList: [{dataIndex: 'anchor_id'}]}]
      },

      {
        formType: 'grid', cols: [
          {span: 12, formList: [{dataIndex: 'wx_id'}]},
          {span: 12, formList: [{dataIndex: 'recharge_money'}]},

        ]
      },

      {
        formType: 'grid', cols: [
          {span: 12, formList: [{dataIndex: 'bind_mobile'}]},
          {span: 12, formList: [{dataIndex: 'client_ip'}]}
        ]
      },
      {formType: 'grid', cols: [{span: 24, formList: [{dataIndex: 'remark'}]}]},
    ]
  },
})

const columns = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true},
  {
    title: '账号', dataIndex: 'username', width: 130, search: true,
    commonRules: [{required: true, message: '账号必填'}]
  },
  {
    title: '密码', dataIndex: 'password', width: 80, search: true,
    commonRules: [{required: true, message: '密码必填'}]
  },
  {
    title: '游戏', dataIndex: 'game_id', width: 100,
    formType: 'select',
    search: true,
    dict: {
      data: async () => {
        let response = await GameApi.getList()
        return response.data
      },
      translation: true,
      props: {label: 'name', value: 'id'}
    },
    commonRules: [{required: true, message: '游戏必填'}]
  },
  {
    title: '主播', dataIndex: 'anchor_id', width: 80,
    formType: 'select',
    search: true,
    dict: {
      data: async () => {
        let response = await AnchorApi.getList()
        return response.data
      },
      translation: true, width: 80,
      props: {label: 'name', value: 'id'}
    },
    commonRules: [{required: true, message: '主播必填'}]
  },
  {
    title: '微信昵称', dataIndex: 'wx_id', width: 100,
    formType: 'select',
    search: true,
    dict: {
      async data() {
        let response = await WxApi.getList()
        return response.data
      },
      translation: true,
      props: {label: 'nickname', value: 'id'}
    }
  },
  {
    title: '充值金额', dataIndex: 'recharge_money', width: 80,
    placeholder: "非必填",
    formType: "input-number",
    commonRules: [{message: '非必填'}]
  },
  {
    title: '绑定手机号', dataIndex: 'bind_mobile', width: 80, hide: true,
    placeholder: "非必填",
    commonRules: [{message: '非必填'}]
  },
  {
    title: '备注', dataIndex: 'remark', width: 180, hide: true,
    formType: 'textarea', labelWidth: '86px'
  },
  {
    title: '登录信息', dataIndex: 'login_info', hide: true,
    formType: 'textarea', labelWidth: '86px'
    , placeholder: "由程序获取,非专业勿填!"
  },
  {
    title: '角色信息', dataIndex: 'role_info', hide: true,
    formType: 'textarea', labelWidth: '86px'
    , placeholder: "由程序获取,非专业勿填!"
  },
  {
    title: '设备信息', dataIndex: 'device', hide: true,
    formType: 'textarea', labelWidth: '86px'
    , placeholder: "由程序获取,非专业勿填!"
  },
  {
    title: '伪造ip', dataIndex: 'client_ip', hide: true,
    labelWidth: '86px'
    , placeholder: "由程序获取,非专业勿填!"
  }, {
    title: 'cookie'
    , dataIndex: 'cookies'
    , formType: 'textarea'
    , labelWidth: '86px'
    , width: 160
    , placeholder: "由程序获取,非专业勿填!"
  },
  {
    title: '注册时间', dataIndex: 'registered_at', width: 180,
    addDisplay: true, editDisplay: true,
    search: true, formType: 'date',
    showTime: true,
    commonRules: [{required: true, message: '注册时间必填'}]
  },
  {
    title: '创建时间', dataIndex: 'created_at', width: 180, addDisplay: false, editDisplay: false,
    hide: true, formType: 'range'
  },
])

function doLogin(record) {
  const loading = Message.loading('登录中...')
  Api.login({id: record.id})
      .then(response => {
        loading.close()
        if (response.success) {
          Message.success('登录成功')
          crudRef.value.refresh()
        } else {
          console.log(response)
          Message.error("登录失败")
        }
      })
}


const financeRef = ref()

function openFinanceModal(record) {
  financeRef.value.open(record)
}
</script>


<style scoped>

</style>
